<template>
    <div>
      <h1>房型修改</h1>
      <div>
        <table class="table table-bordered">
          <tbody>
            <tr>
              <td align="right">房型名称</td>
              <td>
                <input type="text" v-model="query.typeName"/>
              </td>
            </tr>
            <tr>
              <td align="right">单价</td>
              <td>
                <input type="text" v-model="query.price"/>
              </td>
            </tr>
            <tr>
              <td align="right">房型面积</td>
              <td>
                <input type="text" v-model="query.area"/>
              </td>
            </tr>
            <tr>
              <td align="right">最多入住人数</td>
              <td>
                <input type="number" v-model="query.peoples" min="1"/>
              </td>
            </tr>
            <tr>
              <td align="right">房型图片</td>
              <td>
                <input type="file" @change="img" />
                <img :src="query.houseImg" alt="" width="160px" height="100px" v-if="query.houseImg != ''"/>
              </td>
            </tr>
            <tr>
              <td align="right">房型描述</td>
              <td>
                <textarea v-model="query.desc"></textarea>
              </td>
            </tr>
            <tr>
              <td align="right">是否有窗</td>
              <td>
                <input type="radio" :value="0" name="info" v-model="query.isWin"/>是
                <input type="radio" :value="1" name="info" v-model="query.isWin"/>否
              </td>
            </tr>
            <tr>
              <td></td>
              <td>
                <input type="button" value="修改" class="btn btn-success" @click="ok"/>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import axios from 'axios';
  import moment from 'moment';
  import { ref,reactive,onMounted } from 'vue';
  import { useRoute,useRouter } from 'vue-router';
  const route=useRoute();
  const router=useRouter();
  
  
  import {useUserStore} from '@/stores/user'
  const abc=useUserStore();
  
  let query:any=reactive
  ({
    "houseId":route.query.id,
    "typeName": "",
    "price": "",
    "area": "",
    "peoples": "",
    "houseImg": "",
    "desc": "",
    "isWin": 0
  })
  
  //上传图片
  const img=(e:any)=>
  {
      console.log(e);
      let obj=e.target.files[0];
      let f=new FormData();
      f.append('file',obj);
      axios
      ({
        url:'/api/Img/Photo',
        method:'post',
        data:f
      })
      .then(res=>{
        console.log(res);
        query.houseImg=res.data;
      })
      .catch(err=>{
  
      })
  }
  onMounted(()=>{
    fan();
  })
  const fan=()=>
  {
    axios
    ({
        url:'/api/House/HouseFan',
        method:'get',
        params:
        {
            id:route.query.id
        }
    })
    .then(res=>{
        Object.assign(query,res.data);
    })
    .catch(err=>{

    })
  }

  const ok=()=>
  {
    if(query.typeName=="")
    {
      alert("房型名称不能为空");
      return;
    }
    if(query.price=="")
    {
      alert("房型价格不能为空");
      return;
    }
    let reg=/^[1-9]\d+(\.[0-9]+)?$/;
    if(reg.test(query.price)==false)
    {
      alert("房型价格只能是正数");
      return;
    }
    if(query.area=="")
    {
      alert("面积不能为空");
      return;
    }
    if(query.peoples=="")
    {
      alert("入住人数不能为空");
      return;
    }
    if(query.houseImg=="")
    {
      alert("房型图片不能为空");
      return;
    }
    axios
    ({
      url:'/api/House/HouseUpdate',
      method:'put',
      data:query
    })
    .then(res=>{
      if(res.data>0)
      {
        alert("修改成功");
        router.push('/houseList');
        return;
      }
      else
      {
        alert("修改失败");
        return;
      }
    })
    .catch(err=>{
  
    })
  }
  </script>
  
  <style scoped></style>
  